/* eslint-disable react/no-unused-state */
import React, { Component } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Navbbar from "../../components/Navbbar"
import "./index.less"
import requst from '../../utils/http'
import Taro from '@tarojs/taro'

export default class Classify extends Component {
  state = {
    current: 0,
    left_list: [],
    right_list: []
  }
  componentDidMount() {
    requst(2, 'post', '/class?appkey=12d96537cc4e185f', {}).then((res) => {
      console.log(res.data.result[0].list, 999, this.state.current)
      this.setState({
        left_list: [...res.data.result],
        right_list: res.data.result[0].list
      })
    })
  }
  handleClick = (index) => {
    console.log(111)
    this.setState({
      current: index,
      right_list: this.state.left_list[index].list
    })
  }
  handleClassify = (classid) => {
    Taro.navigateTo({
      url:`../searchDetail/index?classid=${classid}`
    })

  }
  render() {
    return (
      <View>
        <Navbbar type={2}></Navbbar>
        <View className='classify_wrap'>
          <View className='classfy_list'>
            {
              this.state.left_list.map((item, index) => {
                // eslint-disable-next-line no-shadow
                return <View onClick={() => (this.handleClick(index))} className={(this.state.current == index ? 'active' : '') + ' list_item'} key={item.classid}>{item.name}</View>
              })
            }
          </View>
          <ScrollView scrollY scrollWithAnimation className='scrollview_fen'>
            <View className='classfy_content'>
              {this.state.right_list.map(item => { return <View onClick={()=>this.handleClassify(item.classid)} key={item.classid} className='right_item'>{item.name}</View>})}
            </View>
          </ScrollView>


        </View>
      </View>
    )
  }


}
